<template>
  <view class="menu-container">
    <view class="top-menu">
      <view class="card-menu">

        <view class="menu-item" @click="goJumpTo('/pages/Mytodolist/home/index')">
          <view class="message-box">
            <view class="message" v-if="Todoquantity !== 0">{{ Todoquantity }}</view>
            <image src="@/static/work-home/wodedaiban.png"></image>
          </view>
          <view class="menu-title">待办</view>
        </view>

        <view class="menu-item" @click="goJumpTo('/pages/workspace/attendance/clockIn')">
          <view>
            <image src="@/static/work-home/dk.png"></image>
          </view>
          <view class="menu-title">考勤打卡</view>
        </view>
        <view class="menu-item" @click="goJumpTo('/pages/apply/home/index')">
          <view>
            <image src="@/static/work-home/sp.png"></image>
          </view>
          <view class="menu-title">OA审批</view>
        </view>
        <view class="menu-item" @click="goJumpTo('/pages/supplyChain/home/index')">
          <view>
            <image src="@/static/work-home/fenxiqushi.png"></image>
          </view>
          <view class="menu-title">供应链</view>
        </view>
        <view class="menu-item" @click="goJumpTo('/pages/Attcemannt/home/index')">
          <view>
            <image src="@/static/work-home/kaoqing.png"></image>
          </view>
          <view class="menu-title">考勤管理</view>
        </view>
      </view>
    </view>

    <view class="search-box">
      <view class="search-box__label">
        搜<span class="gradient-character">索</span>
      </view>
      <view class="search-box__divider"></view>
      <input class="search-box__input" type="text" placeholder="请输入你想要搜索的应用" />
      <view class="search-box__button">
        <image class="search-box__icon" src="../../static/work-home/searchfor.png" />
      </view>
    </view>

    <view class="menu-card">
      <up-collapse :value="['0']">
        <up-collapse-item name="0" title="常用应用" :border="false" style="border-radius: 10px !important;">
          <view class="card-menu">
            <view class="menu-item" @click="goJumpTo('/pages/workspace/attendance/clockIn')">
              <view>
                <image src="@/static/work-home/dk.png"></image>
              </view>
              <view>考勤打卡</view>
            </view>
            <view class="menu-item" @click="goJumpTo('/pages/apply/home/index')">
              <view>
                <image src="@/static/work-home/sp.png"></image>
              </view>
              <view>OA审批</view>
            </view>
            <view class="menu-item" @click="goJumpTo('/pages/supplyChain/home/index')">
              <view>
                <image src="@/static/work-home/fenxiqushi.png"></image>
              </view>
              <view>供应链</view>
            </view>
            <view class="menu-item" @click="goJumpTo('/pages/Attcemannt/home/index')">
              <view>
                <image src="@/static/work-home/kaoqing.png"></image>
              </view>
              <view>考勤管理</view>
            </view>

          </view>
        </up-collapse-item>
      </up-collapse>
    </view>


    <view class="menu-card">
      <up-collapse :value="['0']">
        <up-collapse-item name="0" title="办公台" :border="false">
          <view class="card-menu work-space">

            <view class="menu-item" @click="goJumpTo('/pages/Mytodolist/home/index')">
              <view class="message-box">
                <view class="message" v-if="Todoquantity !== 0">{{ Todoquantity }}</view>
                <image src="@/static/work-home/wodedaiban.png"></image>
              </view>
              <view>待办</view>
            </view>

            <view class="menu-item" @click="goJumpTo('/pages/worklog/index')">
              <view class="message-box">
                <view class="message" v-if="unreadLog !== 0">{{ unreadLog }}</view>
                <image src="@/static/work-home/rz.png"></image>
              </view>
              <view>日志</view>
            </view>

            <view class="menu-item" @click="goJumpTo('/pages/park/home/index')">
              <view>
                <image src="@/static/work-home/jigou.png"></image>
              </view>
              <view>园区管理</view>
            </view>

            <view class="menu-item" @click="goJumpTo('/pages/supplyChain/home/index')">
              <view>
                <image src="@/static/work-home/fenxiqushi.png"></image>
              </view>
              <view>供应链</view>
            </view>

            <view class="menu-item" @click="goJumpTo('水印相机')">
              <view>
                <image src="@/static/work-home/shuiyin.png"></image>
              </view>
              <view>水印相机</view>
            </view>


            <view class="menu-item" @click="goJumpTo('')">
              <view>
                <image class="ProhibitedStyle" src="@/static/work-home/renyuan.png"></image>
              </view>
              <view>人力资源</view>
            </view>

            <view class="menu-item" @click="goJumpTo('')">
              <view>
                <image class="ProhibitedStyle" src="@/static/work-home/caigou.png"></image>
              </view>
              <view>物资商城</view>
            </view>

            <view class="menu-item" @click="goJumpTo('')">
              <view>
                <image class="ProhibitedStyle" src="@/static/work-home/weixiu.png"></image>
              </view>
              <view>工程管理</view>
            </view>
            <view class="menu-item" @click="goJumpTo('')">
              <view>
                <image class="ProhibitedStyle" src="@/static/work-home/yusuan.png"></image>
              </view>
              <view>财务中心</view>
            </view>
            <view class="menu-item" @click="goJumpTo('')">
              <view>
                <image class="ProhibitedStyle" src="@/static/work-home/caigouguanli.png"></image>
              </view>
              <view>采购管理</view>
            </view>
            <view class="menu-item" @click="goJumpTo('')">
              <view>
                <image class="ProhibitedStyle" src="@/static/work-home/churu.png"></image>
              </view>
              <view>仓库管理</view>
            </view>
            <view class="menu-item" @click="goJumpTo('')">
              <view>
                <image class="ProhibitedStyle" src="@/static/work-home/xmgl.png"></image>
              </view>
              <view>商务中心</view>
            </view>
            <view class="menu-item" @click="goJumpTo('')">
              <view>
                <image class="ProhibitedStyle" src="@/static/work-home/wenjuan.png"></image>
              </view>
              <view>统计报表</view>
            </view>
            <view class="menu-item" @click="goJumpTo('')">
              <view>
                <image class="ProhibitedStyle" src="@/static/work-home/shop.png"></image>
              </view>
              <view>销售商城</view>
            </view>
            <!-- /pages/ocumentManagement/home/index -->
            <view class="menu-item" @click="goJumpTo('')">
              <view>
                <image class="ProhibitedStyle" src="@/static/work-home/dangan.png"></image>
              </view>
              <view>文档管理</view>
            </view>
          </view>
        </up-collapse-item>
      </up-collapse>
    </view>

    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
import park from '@/apis/cloud/park.js';
import { useStartTodoPolling, useUserStore } from "@/pinia-store/user.js";
import { mapStores } from 'pinia';
import request from "../../utils/request.js";


export default {
  name: 'work-home-menu',
  props: {
    infoList: {
      type: Array,
      default: []
    }
  },
  data () {
    return {
      height: 0,
      show: false,
      todoQuantity: 0, // 待办标记
      checkInterval: null,// 用于存储定时器ID
      unreadLog: 0, //未读日志数量
      logTimer: null//日志定时器
    };
  },
  computed: {
    ...mapStores(useUserStore, useStartTodoPolling),
    Todoquantity () {
      const todoStore = useStartTodoPolling();
      return todoStore.total
    }
  },
  mounted () {
    // this.setupInterval();
    // this.setupTimerLog();
  },
  methods: {
    async goJumpTo (link) {
      if (!link) {
        uni.$u.toast('功能正在开发中');
        return
      }

      const userStore = useUserStore();
      /* if (link === '/pages/Attcemannt/home/index') {
        const allowedIds = ['235', '236', '237', '238', '461', '1', '232', '251', '258', '263', '511', '525'];
        const workerId = userStore.user.worker_id.toString();
        if (!allowedIds.includes(workerId)) {
          this.$refs.uToast.show(
            {
              type: 'error',
              icon: false,
              title: '权限不足',
              message: '人力资源板块仅对人事部门同事开放',
            }
          );
          return;
        }
      } */

      if (link === '/pages/park/home/index') {
        const allowPark = await park.checkPower({ phone: this.userStore.user.phone });
        if (!allowPark.status || allowPark.data.length == 0) {
          this.$refs.uToast.show(
            {
              type: 'error',
              icon: false,
              title: '权限不足',
              message: '园区管理仅对园区管理中心同事开放',
            }
          );
          return;
        }
      }

      if (link === '水印相机') {
        // #ifdef APP-PLUS
        uni.navigateTo({
          url: '/pages/watermark/components/home',
          animationType: 'none'
        });
        // #endif

        // #ifdef H5
        uni.navigateTo({
          url: '/pages/watermark/components/h5camera',
          animationType: 'none'
        });
        // #endif

        return;
      }


      uni.navigateTo({
        url: link,
        animationType: 'none'
      });
    },
    // 获取待办数量
    getMyCheck () {
      const query = {
        pageSize: 10,
        row: 10,
        page: 1,
        keywords: '',
        type: 0,
        time: 1,
        style: 1,
      };
      request({
        url: '/index/BackLog/index',
        method: 'POST',
        data: query,
      }).then(res => {
        if (res.status > 0) {
          this.todoQuantity = res.total
        } else {
          this.todoQuantity = 0
        }
      })
        .catch(error => {
          this.todoQuantity = 0
          console.error('获取数据失败:', error);
        });
    },

    // 设置5分钟定时器
    setupInterval () {
      // 先立即执行一次
      this.getMyCheck();

      // 设置每5分钟执行一次
      this.checkInterval = setInterval(() => {
        this.getMyCheck();
      }, 300000);
    },

    // 清除定时器
    clearInterval () {
      if (this.checkInterval) {
        clearInterval(this.checkInterval);
        this.checkInterval = null;
      }
    },

    //获取未读日志
    getUnreadLog () {
      const token = uni.getStorageSync('token');
      if (!token) {
        return
      }
      const query = {
        worker_id: this.userStore.user.worker_id,
      };
      request({
        url: '/index/Log/get_unread_num',
        method: 'POST',
        data: query,
      }).then((res) => {
        if (res.status > 0) {
          //console.log("res===", res)
          this.unreadLog = res.data
        } else {
          //console.log("res===", res)
          this.unreadLog = 0
          this.clearTimerLog();
        }
      }).catch(error => {
        this.unreadLog = 0
        this.clearTimerLog();
        console.error('获取数据失败:', error);
      });
    },
    // 设置日志定时器 获取未读日志数量
    async startLogTimer () {
      await this.clearTimerLog();

      // 保存延迟器 ID，避免叠加
      this.logTimeout = await setTimeout(() => {
        this.getUnreadLog();

        // 启动正式定时器
        this.logTimer = setInterval(() => {
          this.getUnreadLog();
        }, 6000);
      }, 1000);
    },
    // 清除日志定时器
    clearTimerLog () {
      if (this.logTimeout) {
        clearTimeout(this.logTimeout);
        this.logTimeout = null;
      }
      if (this.logTimer) {
        clearInterval(this.logTimer);
        this.logTimer = null;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.menu-container {
  max-height: 100%;
  padding: 0 20rpx 10rpx 20rpx;
}

// 顶部菜单
.top-menu {
  margin-top: 24rpx;
  background-color: transparent;
  border-radius: 8rpx;
  padding: 24rpx 20rpx;

  .card-title {
    font-size: 28rpx;
    font-weight: 550;
    margin-bottom: 18rpx;
  }

  .card-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .work-space .menu-item {
    margin-bottom: 24rpx;
  }

  .menu-item {
    text-align: center;
    font-size: 24rpx;
    width: 16%;

    .message-box {
      position: relative;

      .message {
        position: absolute;
        right: 0%;
        z-index: 1;
        top: -13%;
        width: 15px;
        height: 15px;
        line-height: 15px;
        background-color: red;
        border-radius: 10px;
        color: #fff;
      }
    }


    image {
      width: 84rpx;
      height: 84rpx;
      background-color: #fff;
      border-radius: 24rpx;
    }

    .menu-title {
      padding-top: 5rpx;
      color: #fff;
    }
  }

  .menu-item1 {
    text-align: center;
    font-size: 24rpx;
    // pointer-events: none; /* 禁止所有鼠标事件 */
    opacity: 0.5;
    /* 可选：视觉上置灰 */
    width: 25%;

    image {
      width: 84rpx;
      height: 84rpx;
    }
  }
}

.search-box {
  margin-top: 14rpx;
  display: flex;
  align-items: center;
  height: 40px;
  background-color: #f3f8fc;
  border-radius: 10px;
  padding: 0 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);

  &__label {
    font-style: italic;
    color: #666;
    font-size: 14px;
    white-space: nowrap;
    margin-right: 8px;
    color: #5a81d9;
    font-weight: bold;

    .gradient-character {
      background: linear-gradient(90deg, #5a81d9, #96b1e9);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
  }

  &__divider {
    width: 2px;
    height: 20px;
    background-color: #ddd;
    margin: 0 8px;
  }

  &__input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 14px;
    color: #333;
    height: 100%;
    padding: 0 8px;

    &::placeholder {
      color: #aaa;
      font-size: 13px;
    }
  }

  &__button {
    border: none !important;
    background: transparent;
    padding: 0;
    margin-left: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__icon {
    width: 1.875rem;
    height: 1.875rem;
  }
}

.menu-card {
  margin-top: 34rpx;
  background-color: #fff;
  border-radius: 8rpx;
  // padding: 24rpx 20rpx;
  border-radius: 10px;

  .card-title {
    font-size: 28rpx;
    font-weight: 550;
    margin-bottom: 18rpx;
  }

  .card-menu {
    display: flex;
    flex-wrap: wrap;
    //justify-content: space-between;
  }

  .work-space .menu-item {
    margin-bottom: 24rpx;
  }

  .menu-item {
    text-align: center;
    font-size: 24rpx;
    width: 25%;

    .message-box {
      position: relative;

      .message {
        position: absolute;
        right: 16%;
        z-index: 1;
        top: -13%;
        width: 15px;
        height: 15px;
        line-height: 15px;
        background-color: red;
        border-radius: 10px;
        color: #fff;
      }
    }


    image {
      width: 84rpx;
      height: 84rpx;
    }
  }

  .menu-item1 {
    text-align: center;
    font-size: 24rpx;
    // pointer-events: none; /* 禁止所有鼠标事件 */
    opacity: 0.5;
    /* 可选：视觉上置灰 */
    width: 25%;

    image {
      width: 84rpx;
      height: 84rpx;
    }
  }
}


.ProhibitedStyle {
  filter: grayscale(90%);
  border-radius: 17rpx;
}
</style>
<style>
/deep/ .u-line {
  border-bottom: none !important;
}

/deep/ .u-cell {
  border-radius: 10px;
}
</style>
